<template>
  <div class="profile-page">
    <van-nav-bar :title="$t('profile.title')" left-arrow @click-left="onClickLeft" />

    <div v-if="loading" class="loading-container">
      <van-loading type="spinner" color="#1989fa" />
    </div>

    <div v-else-if="error" class="error-container">
      <van-icon name="warning-o" size="48" color="#ee0a24" />
      <p>{{ error }}</p>
      <van-button type="primary" @click="retryLoading">重试</van-button>
    </div>

    <div v-else class="profile-content">
      <!-- 个人信息卡片 -->
      <van-cell-group inset class="user-card">
        <van-cell center>
          <template #icon>
            <van-image round width="60" height="60" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          </template>
          <template #title>
            <div class="user-info">
              <span class="username">张三</span>
              <span class="user-id">ID: 10086</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 功能列表 -->
      <van-cell-group inset class="function-list">
        <van-cell :title="$t('profile.personalInfo')" is-link @click="showPersonalInfo = true" />
        <van-cell :title="$t('profile.medicalHistory')" is-link @click="showMedicalHistory = true" />
        <van-cell :title="$t('profile.healthRecords')" is-link @click="goToHealthRecord" />
      </van-cell-group>

      <!-- 设置列表 -->
      <van-cell-group inset class="settings-list">
        <van-cell :title="$t('profile.language')" is-link @click="showLanguagePopup = true">
          <template #value>
            <span class="current-language">{{ currentLanguage }}</span>
          </template>
        </van-cell>
        <van-cell :title="$t('profile.settings')" is-link @click="showSettings = true" />
      </van-cell-group>
    </div>

    <!-- 语言选择弹窗 -->
    <van-popup v-model:show="showLanguagePopup" position="bottom" round>
      <van-picker :columns="languageColumns" @confirm="onLanguageConfirm" @cancel="showLanguagePopup = false"
        show-toolbar :title="$t('profile.language')" :default-index="currentLanguageIndex" :loading="false"
        :visible-item-count="5" />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showToast } from 'vant'

const router = useRouter()
const { t, locale } = useI18n()

const loading = ref(true)
const error = ref('')
const showPersonalInfo = ref(false)
const showMedicalHistory = ref(false)
const showHealthRecords = ref(false)
const showSettings = ref(false)
const showLanguagePopup = ref(false)

const languageColumns = [
  { text: '中文', value: 'zh' },
  { text: 'English', value: 'en' }
]

const currentLanguage = computed(() => {
  return locale.value === 'zh' ? '中文' : 'English'
})

const currentLanguageIndex = computed(() => {
  return locale.value === 'zh' ? 0 : 1
})

const onClickLeft = () => {
  router.back()
}

const onLanguageConfirm = (value: { selectedValues: string[] }) => {
  const newLocale = value.selectedValues[0]
  showLanguagePopup.value = false
  setTimeout(() => {
    locale.value = newLocale
    localStorage.setItem('language', newLocale)
    showToast(t('common.success'))
  }, 100)
}

const loadProfileData = async () => {
  try {
    loading.value = true
    error.value = ''
    // TODO: 加载用户数据
    await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟加载
    loading.value = false
  } catch (err) {
    error.value = t('common.fail')
    loading.value = false
  }
}

const retryLoading = () => {
  loadProfileData()
}

const goToHealthRecord = () => {
  router.push('/health-record')
}

onMounted(() => {
  loadProfileData()
})
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;

  p {
    margin: 16px 0;
    color: #666;
  }
}

.profile-content {
  padding: 16px;
}

.user-card {
  margin-bottom: 16px;

  .user-info {
    display: flex;
    flex-direction: column;

    .username {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .user-id {
      font-size: 14px;
      color: #999;
    }
  }
}

.function-list {
  margin-bottom: 16px;
}

.settings-list {
  .current-language {
    color: #666;
  }
}
</style>